<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>媒体评分系统</title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			html,body{
				height: 100%;
				font-family: "微软雅黑";
				font-size: 14px;
				min-width: 1200px;
				position: relative;
			}
			a{
				text-decoration: none;
				color: #ffffff;
			}
			a:hover{
				text-decoration: underline;
			}
			.parentHeight{
				height: 100%;
			}
			.ulList{
				background: #1C2B36;
				height: 100%;
	            margin-top: -3px;
			}
			.ulList>li>a{
				color: #FFFFFF;
				text-decoration: none;
                margin-top: 20px;
                display: inline-block;
                width: 196px;
                line-height: 45px;
                text-align: center;
                font-family: "微软雅黑";
			}
			.ulList>li>a:hover{
				background: #000;
			   
			}
			summary>a{
				color: #FFFFFF;
				font-family: "微软雅黑";
				text-align: center;
				padding-left: 20px;
				line-height: 30px;
				background: #000000;
				border-left: 4px solid #FF5402;
				display: inline-block;
				width: 176px;
				text-decoration: none;
				font-size: 14px;
			}
			summary>a:hover{
				color:#FF5402;
				cursor: pointer;
				
			}
			.border-limit{
				border: 1px solid #000;
			}
			.open{
				display: block;
			}
			.close{
				display: none;
			}
			.active{
				border-left: 4px solid #FF5402;
				background: #000;
			}
            .title{
            	color: #FFFFFF;
            	text-align: center;
            	font-size:18px;
            	font-weight: bold;
            	padding-top: 20px;
            }
            .summaryActive{
            	color:#FF5402 ;
            }
            .username{
            	width: 100%;
            	height: 60px;
            	line-height: 60px;
            	background: #222;
            	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
            	color: #FFFFFF;
            }
            .username .logo{
            	float: left;
            	font-family: "Comic Sans MS";
            	font-size: 2.2rem;
            	padding-left: 1rem;
            }
             .username-shell{
            	display: inline-block;
            	position: relative;
                font-size: 0;
                padding: 2rem 6rem;
                float: right;
            }
            .username-item{
            	position: absolute;
            	top: 0;
            	left: 0;
            	width: 100%;
            	height: 100%;
            	font-size: 1.2rem;
            }
          
             #msg{
			   width: 400px;
			   height: 200px;
			   border: 1px solid #DCDCDC;
			   box-shadow: 0px 0px 20px #DCDCDC;
			   position: absolute;
			   left: 50%;
			   margin-left: -200px;
	           background: #FFFFFF;
			   -webkit-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				transition: all 0.2s linear;
		}
		
		.alertShow{
			top:10%;
		}
		.alertHide{
			top:-10px;
			top:-220px;
		}
		.alertHint{
			width: 100%;
			height: 35px;
			background: #F7F7F7;
			border-bottom: 1px solid #ddd;
		
		}
		.alertTitle{
			line-height: 30px;
			float: left;
			background: #F7F7F7;
		
		}
		.alertTitle>span{
			display: inline-block;
			margin-left: 8px;
			font-family: "微软雅黑";
		}
		.alertDelete{
			float: right;
			line-height: 35px;
			margin-right: 8px;
		}
		.alertDelete>span{
			display: inline-block;
			margin-right: 8px;
            cursor: pointer;			
		}
		.alertContent{
			margin-top: 10%;
			text-align: center;
		}
		.alertBtns{
			text-align: center;
			margin-top: 12%;
		}
		.alertBtns>button{
			width: 60px;
			height: 30px;
			border: none;
			cursor: pointer;
			outline: none;
			font-family: "微软雅黑";
		}
		#alertSureBtn{
			background:#2E8DED;
			border: 1px solid #2E8DED;
			color: #FFFFFF;
		}
		.buttonStyle:hover{
			opacity: 0.8;
		}
		.buttonStyle:active{
			-webkit-transform: scale(0.95);
            transform: scale(0.95);
		}
		.main{
				width:100%;
				min-height: 1200px;
				margin: auto;
				display: -webkit-flex;
				display: flex;
		}
		.left{
		         width: 200px;
				background:#1C2B36 ;
			    
		}
		
	
		.right{
			    -webkit-flex: 1;
				-moz-box-flex:1;
	            -ms-flex:1;
	            -o-flex:1;
	            flex:1;
	            z-index: -1;
				background:-webkit-linear-gradient(left,#dbdbdb,#eaeaea);
				background: -moz-linear-gradient(#dbdbdb, #eaeaea);
				background: -o-linear-gradient(#dbdbdb, #eaeaea);
				filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=50,finishy=50)
		}
		.right-content{
			padding: 40rem;
			margin:1rem;
			background: #FFFFFF;
			border-radius: 5px;
		}
		
		.clearfix:before,
		.clearfix:after{
			display: table;
			content: "";
		}
		.clearfixa:after{
			clear: both;
		}
		</style>
	</head>
	<body>
		
		 <div class="username clearfix">
						<div class="logo">媒体评分系统</div>
						<div class="username-shell">
							<div class="username-item">
								 <a href="#" id="logout">安全退出</a>
							</div>
							
						</div>
						<div class="username-shell">
							<div class="username-item">
								<span>欢迎你，外国人小姐</span>
							</div>
						</div>
						
		 </div>
		
		<div class="main">
			    
				<div class="left"  >
					<div class="menuContainer" >
					   <ul class="ulList">
					   	<!--<div class="title">媒体评分系统</div>-->
					   	<li>
					   		<a href="#">文章管理</a>
					   		<div style="display: none;">
					   			<summary ><a href="#">文章管理1</a></summary>
					   		    <summary ><a href="#">文章管理2</a></summary>
					   		</div>
					   	</li>
					   	<li>
					   		<a href="#">客户管理</a>
					   		<div style="display: none;" >
					   			<summary ><a href="#">客户管理1</a></summary>
					   		    <summary ><a href="#">客户管理2</a></summary>
					   		</div>
					   	</li>
					   	<li>
					   		<a href="#">制作简报</a>
					   		<div style="display: none;">
					   			<summary ><a href="#">简报列表1</a></summary>
					   		    <summary ><a href="#">简报列表2</a></summary>
					   		</div>
					   		
					   	</li>
					   	<li>
					   		<a href="#">项目管理</a>
					   		<div style="display: none;">
					   			<summary>
					   				<a href="#">项目管理1</a>
					   			</summary>
					   		    <summary>
					   		    	<a href="#">项目管理2</a>
					   		    </summary>
					   		</div>
					   	</li>
					   </ul>	
					</div>
				</div>
				
				
				<div class="right" >
					<div class="right-content">
						
					</div>
					
				</div>
			
		</div><!--container-fluid end-->
		
		
		<!--覆盖层-->
	
			<div id="msg" class="alertHide">
			<div class="alertHint">
				<div class="alertTitle"><span>提示信息</span></div>
			    <div class="alertDelete"><span id="calIcon">取消</span></div>
			    <div style="clear: both;"></div>
			</div>
			<div class="alertContent">
				<span>(ง •̀_•́)ง确定删除吗...</span>
			</div>
			<div class="alertBtns">
				<button class="buttonStyle" id="alertSureBtn">确定</button>
				<button class="buttonStyle" id="alertCalBtn">取消</button>
			</div>
		  </div><!--msg end-->
	
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
		
		//列表展开
			$(".ulList>li>a").each(function(){
				this.onclick = function(){
					$(this).next().animate({height:'toggle'});
				    $(this).parent().siblings().find("div").hide();
					$(this).addClass("active");
					$(this).parent().siblings().find("a").removeClass("active");
				}
			})
		
				
			
			//列表子元素
			$("summary>a").each(function(){
				this.onclick = function(){
					$(this).addClass("summaryActive");
					$(this).parent().siblings().find("a").removeClass("summaryActive");
				}
			})
			
			
			//安全退出
			$("#logout").bind("click",function(){
		  	     $("#msg").removeClass("alertHide").addClass("alertShow");
		  	     $(".alertContent>span").html("(ง •̀_•́)ง确定退出吗...");
		     })
		  
		  $("#alertSureBtn,#alertCalBtn,#calIcon").bind("click",function(){
		  	 $("#msg").removeClass("alertShow").addClass("alertHide");
		  })
		    
		    //主页按钮
		  $(".home-icon").click(function(){
		  	/* $(".left").animate({width:'toggle'});*/
		  	
		  	 
		  	 
		  
		  })
		    
		    
		    
		</script>
	</body>
</html>
